<template>
    <div>
        <Input type="text" ref="input" v-if="show" v-model="inputValue" @on-blur="onblur"></Input>
        <div v-else @click="onShow">{{ inputValue }}</div>
    </div>
</template>

<script>
import Bus from '@/libs/bus.js'
export default {
    props: ['value', 'row'],
    data() {
        return {
            show: false,
            inputValue: this.value,
            Set: false
        }
    },
    watch: {
        value(val) {
            this.inputValue = val
        },
        inputValue(val) {
            this.$emit('input', val)
        },
        show(val) {
            if (val == false) {
                Bus.$emit('input', {
                    value: this.inputValue,
                    index: this.row
                })
            }
        }
    },
    methods: {
        onShow() {
            this.show = true
            this.$nextTick(() => {
                this.$refs.input.focus()
            })
        },
        onblur() {
            if (this.inputValue) {
                this.show = false
            } else {
                this.show = true
            }
        }
    }
}
</script>

<style>
</style>